<template>
  <view>

    <!-- 搜索框 -->
    <ugo-search />

    <!-- 主体内容 -->
    <view class="category">

      <!-- 左侧 -->
      <scroll-view scroll-y class="category-left">
        <view v-for="(item, index) in cateLeft" :key="item.cat_id" class="category-left-item" @tap="change(index)"
          :class="{ active: activeIndex === index }">
          {{ item.cat_name }}
        </view>
      </scroll-view>

      <!-- 右侧 -->
      <scroll-view :scroll-top="scrollTop" scroll-y class="category-right" @scroll="scroll">
        <!-- 循环 分组 -->
        <view class="group" v-for="item in cateRight" :key="item.cat_id">
          <!-- 分组的标题 -->
          <view class="group-title">{{ item.cat_name }}</view>
          <!-- 分区的列表 -->
          <view class="group-list">
            <!-- 循环 页面链接 嵌套 图片 + 文本 -->
            <!-- 注意：小程序页面传参，需要手动拼接字符串 ?key=value&key2=value2 -->
            <navigator v-for="goods in item.children" :key="goods.cat_id"
              :url="`/pagesA/goods_list/goods_list?query=${goods.cat_name}&cid=${goods.cat_id}`">
              <image :src="goods.cat_icon" mode="aspectFit" />
              <text>{{ goods.cat_name }}</text>
            </navigator>
          </view>
        </view>
      </scroll-view>

    </view>


  </view>
</template>

<script>
export default {
  data() {
    return {
      cateList: [],
      // 高亮下标
      activeIndex: 0,
      scrollTop: 0,
      old: {
        scrollTop: 0
      }
    }
  },
  computed: {

    // 左侧数据
    cateLeft() {
      return this.cateList.map(item => {
        return {
          cat_id: item.cat_id,
          cat_name: item.cat_name
        }
      })
    },

    // 右侧数据
    cateRight() {
      return this.cateList.length > 0 ? this.cateList[this.activeIndex].children : []
    }
  },

  onLoad() {
    this.getCateList()
  },

  methods: {

    async getCateList() {
      const res = await uni.$u.http.get('/categories')
      this.cateList = res.data.message
    },

    async change(index) {
      this.activeIndex = index
      this.scrollTop = this.old.scrollTop
      await this.$nextTick()
      this.scrollTop = 0
    },

    scroll(e) {
      this.old.scrollTop = e.detail.scrollTop
    }

  },
}
</script>


<style lang="scss">
.category {
  width: 100vw;
  /* 🚨注意点1：小程序页面视口是不包含 头部导航 和 底部taBar */
  /* 🚨注意点2：calc 计算函数，加减号两边至少留一个空格，否则不能计算 */
  height: calc(100vh - 44px - var(--window-bottom) - var(--window-top));
  /* 100vh 为视口高，44px 为搜索框高 */
  display: flex;

  .category-left {
    width: 182rpx;
    height: 100%;

    .category-left-item {
      height: 100rpx;
      background-color: #f3f3f3;
      font-size: 28rpx;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    // 高亮类名
    .active {
      background-color: #fff;
      color: #ea4350;
      position: relative;

      // 高亮前面的色块
      &::before {
        content: '';
        width: 4rpx;
        height: 44rpx;
        background-color: #ea4350;
        position: absolute;
        left: 0;
      }
    }
  }

  .category-right {
    flex: 1;
    height: 100%;

    .group {
      .group-title {
        font-size: 26rpx;
        text-align: center;
        padding-top: 40rpx;

        // 文字左右的修饰线
        &::before,
        &::after {
          content: '/';
          color: #ccc;
          margin: 0 10rpx;
        }
      }

      // 列表水平排列并换行
      .group-list {
        display: flex;
        flex-wrap: wrap;

        // 导航水平只放3个，一个的宽度为 33.33%
        navigator {
          width: 33.3333%;
          // 设置 flex
          display: flex;
          // flex 方向改为垂直
          justify-content: center;
          // 水平垂直居中排列
          align-items: center;
          flex-direction: column;
          padding: 20rpx 0;
        }

        // 图片定宽高
        image {
          width: 120rpx;
          height: 120rpx;
        }

        // 修改文字大小
        text {
          font-size: 22rpx;
        }
      }
    }
  }
}
</style>